<template>
	<view class="content">
		<!-- 搜索框 -->
		<view class="search" @tap="changeShowPopup(true)"><u-search bgColor="#f7f8fa" :disabled="true" :showAction="false" placeholder="请输入搜索关键词"></u-search></view>

		<!-- 轮播图 -->
		<swiper class="swiper" :circular="true" :indicator-dots="true" :autoplay="true">
			<swiper-item class="swiper-item" v-for="(item, index) in banner" :key="item.id">
				<image class="swiper-item-img" :src="item.image_url" mode="widthFix"></image>
			</swiper-item>
		</swiper>

		<!-- 频道 -->
		<u-grid :border="true" col="5">
			<u-grid-item v-for="(listItem, listIndex) in channel" :key="listIndex">
				<u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="listItem.icon_url" :size="22"></u-icon>
				<text class="grid-text">{{ listItem.name }}</text>
			</u-grid-item>
		</u-grid>

		<!-- 品牌区域 -->
		<view class="cd-brand-area">
			<view class="cd-big-title">品牌制造商直供</view>

			<view class="cd-brand-content">
				<view @tap="ppxqy" class="cd-brand-item" v-for="(item, index) in brandList" :key="item.id" :data-ppxqy="brandList[index].id">
					<view class="cd-brand-item-name">{{ item.name }}</view>
					<view class="cd-brand-item-price">{{ item.floor_price | priceFormat }}</view>
					<image class="cd-brand-item-img" :src="item.pic_url" mode="widthFix" />
				</view>
			</view>
		</view>

		<!-- 新品发布 -->
		<view class="cd-newgoods-area">
			<view class="cd-big-title">周一周四•新品首发</view>

			<!-- <cd-goods-list :goodsList="newGoodsList"></cd-goods-list> -->
			<view class="cd-goods-list">
				<view class="cd-goods-item" v-for="item in newGoodsList" :key="item.id" :data-id="item.id" @tap="xpxqy">
					<image class="cd-goods-item-img" :src="item.list_pic_url" mode="widthFix" />
					<view class="cd-goods-item-name">{{ item.name }}</view>
					<view class="cd-goods-item-price">{{ item.retail_price | priceFormat }}</view>
				</view>
			</view>
		</view>

		<!-- 人气推荐 -->
		<view class="cd-recommend-area">
			<view class="cd-big-title">人气推荐</view>

			<view class="cd-recommend-item" v-for="item in hotGoodsList" :key="item.id">
				<view class="cd-recommend-item-img-box"><image class="cd-recommend-item-img" :src="item.list_pic_url" mode="widthFix"></image></view>
				<view class="cd-recommend-item-info-box">
					<view class="cd-recommend-item-info-title">{{ item.name }}</view>
					<view class="cd-recommend-item-info-subtitle">{{ item.goods_brief }}</view>
					<view class="cd-recommend-item-info-price">{{ item.retail_price | priceFormat }}</view>
				</view>
			</view>
		</view>

		<!-- 专题精选 -->
		<view class="cd-topic-area">
			<view class="cd-big-title">专题精选</view>

			<cd-scroll-list :indicator="false">
				<view class="cd-topic-item" v-for="item in topicList" :key="item.id">
					<image :src="item.scene_pic_url" class="cd-topic-item-img" mode="aspectFill"></image>
					<view class="cd-topic-item-title">
						{{ item.title }}
						<text class="cd-topic-item-title-price">{{ item.price_info | priceFormat }}</text>
					</view>
					<view class="cd-topic-item-subtitle">{{ item.subtitle }}</view>
				</view>
			</cd-scroll-list>
		</view>

		<view class="cd-category-list-area">
			<view class="cd-category-list-item-area" v-for="(categoryItem, index) in categoryList" :key="index">
				<view class="cd-big-title">{{ categoryItem.name }}</view>

				<cd-goods-list :goodsList="categoryItem.goodsList"></cd-goods-list>
			</view>
		</view>

		<!-- 使用弹出层组件-搜索 -->
		<cdPopup></cdPopup>

		<customTabBar></customTabBar>
	</view>
</template>

<script>
import customTabBar from '@/custom-tab-bar/index.vue';
import { ApiGetHomeData } from '@/utils/api.js';
import cdScrollList from '@/components/cd-scroll-list/cd-scroll-list.vue';
import cdGoodsList from '@/components/cd-goods-list/cd-goods-list.vue';
import { mapMutations } from 'vuex';
// import uView from 'uview-ui'

// 导入弹出层组件
import cdPopup from '@/components/cd-Popup/cd-Popup.vue';
export default {
	components: {
		customTabBar,
		'cd-scroll-list': cdScrollList,
		'cd-goods-list': cdGoodsList,
		// 注册弹出层组件
		cdPopup
	},
	data() {
		return {
			current: 0,
			banner: [],
			channel: [],
			brandList: [],
			newGoodsList: [],
			hotGoodsList: [],
			topicList: [],
			categoryList: []
		};
	},
	async onLoad() {
		let res = await ApiGetHomeData();

		let { banner, channel, brandList, newGoodsList, hotGoodsList, topicList, categoryList } = res.data;

		this.banner = banner; // 轮播图
		this.channel = channel; // 频道
		this.brandList = brandList; // 品牌制造商
		this.newGoodsList = newGoodsList; // 新品首发
		this.hotGoodsList = hotGoodsList; // 人气推荐
		this.topicList = topicList; // 专题精选
		this.categoryList = categoryList;
	},
	onShow() {
		this.changevalue(0);
	},
	methods: {
		...mapMutations(['changevalue', 'changeShowPopup']),

		// 品牌详情页跳转
		ppxqy(e) {
			uni.navigateTo({
				url: '../ppxqy/ppxqy?id=' + e.currentTarget.dataset.ppxqy
			});
		},
		// 新品详情页
		xpxqy(e) {
			uni.navigateTo({
				url: '../xpxqy/xpxqy?id=' + e.currentTarget.dataset.id
			});
		}
	}
};
</script>

<style lang="scss">
.content {
	background-color: #efefef;
	padding-bottom: 100px;

	.search {
		height: 108rpx;
		padding: 0 25rpx;
		display: flex;
		align-items: center;
		background-color: #fff;
	}
}
.content {
	background-color: #efefef;
	padding-bottom: 100px;
}

// 轮播图
.swiper {
	width: 750rpx;
	height: 400rpx;
	.swiper-item {
		width: 750rpx;
		height: 400rpx;
		.swiper-item-img {
			width: 750rpx;
			height: 400rpx;
		}
	}
}

// 频道
.u-grid {
	background-color: white;
	.u-border-right {
		border-right: 1px solid #f7f8f9;
		height: 140rpx;
	}
	.u-grid-item {
		.grid-text {
			font-size: 24rpx;
			margin-top: 23rpx;
		}
	}
}

// alt 加 键盘上的上下按键可以移动代码

// 大标题
.cd-big-title {
	height: 100rpx;
	font-size: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: white;
}

// 品牌
.cd-brand-area {
	margin-top: 42rpx;
	background-color: white;
	.cd-brand-content {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 236rpx 236rpx;
		gap: 15rpx;
		// 具体项目
		.cd-brand-item {
			position: relative;
			// 名称
			.cd-brand-item-name {
				position: absolute;
				z-index: 1;
				top: 24rpx;
				left: 24rpx;
				font-size: 25rpx;
			}
			// 价格
			.cd-brand-item-price {
				position: absolute;
				z-index: 1;
				top: 85rpx;
				left: 24rpx;
				color: var(--price-color);
				font-size: 24rpx;
			}
			// 图片
			.cd-brand-item-img {
				width: 100%;
			}
		}
	}
}

// 新品首发
.cd-newgoods-area {
	margin-top: 45rpx;
	background-color: white;
}

// 人气推荐
.cd-recommend-area {
	background-color: white;
	margin-top: 20rpx;
	// 推荐项
	.cd-recommend-item {
		height: 213rpx;
		background-color: #fafafa;
		margin-bottom: 17rpx;
		display: flex;
		.cd-recommend-item-img-box {
			// background-color: red;
			flex: 1;
			max-width: 228rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.cd-recommend-item-img {
				width: 90%;
			}
		}
		// 推荐信息盒子
		.cd-recommend-item-info-box {
			// background-color: blue;
			flex: 1;
			// 推荐标题
			.cd-recommend-item-info-title {
				margin-top: 29rpx;
				font-size: 35rpx;
				height: 35rpx;
			}
			// 推荐子标题
			.cd-recommend-item-info-subtitle {
				margin-top: 43rpx;
				font-size: 24rpx;
				height: 24rpx;
			}
			// 推荐价格
			.cd-recommend-item-info-price {
				margin-top: 40rpx;
				font-size: 20rpx;
				height: 20rpx;
				color: var(--price-color);
			}
		}
	}
}

.cd-topic-area {
	margin-top: 40rpx;
	background-color: white;
	.cd-topic-item {
		margin-right: 15rpx;
		// background-color: cadetblue;
		width: 600rpx;
		height: 530rpx;
		.cd-topic-item-img {
			width: 600rpx;
			height: 400rpx;
			display: block;
		}
		.cd-topic-item-title {
			font-size: 32rpx;
			// height: 32rpx;
			margin-top: 27rpx;
			width: 80%;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			.cd-topic-item-title-price {
				color: var(--price-color);
			}
		}
		.cd-topic-item-subtitle {
			font-size: 27rpx;
			height: 27rpx;
			margin-top: 27rpx;
		}
	}
}

.cd-category-list-area {
	background-color: white;
	margin-top: 28rpx;
}
// 新品推荐
.cd-goods-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	// grid-template-rows: 480rpx 480rpx;
	grid-auto-rows: 480rpx;
	gap: 15rpx;
	.cd-goods-item {
		// background-color: skyblue;
		.cd-goods-item-img {
			width: 100%;
		}
		.cd-goods-item-name {
			font-size: 28rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.cd-goods-item-price {
			margin-top: 14rpx;
			font-size: 26rpx;
			color: var(--price-color);
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}
</style>
